<script>
import { useUserStore } from "../stores";
import { StudioAPI } from "../apis";
const MOBILE_REG = /^[1]([3-9])[0-9]{9}$/;
export default {
  data() {
    return {
      userStore: useUserStore(),
      form_type: "LOGIN",
      apps: [],
      login_form: {
        app_id: 1,
        mobile: "",
        password: "",
        verify_field: "MOBILE",
        verify_type: "PASSWORD",
      },
    };
  },
  async mounted() {
    this.apps = await StudioAPI.getApps();
  },
  computed: {
    login_enable() {
      return (
        this.login_form.mobile &&
        MOBILE_REG.test(this.login_form.mobile) &&
        this.login_form.password &&
        this.login_form.password.length > 8
      );
    },
    register_enable() {
      return (
        this.register_form.mobile &&
        MOBILE_REG.test(this.register_form.mobile) &&
        this.register_form.password &&
        this.register_form.password.length >= 8 &&
        this.register_form.check_password === this.register_form.password
      );
    },
  },
  methods: {
    async onLogin() {
      await this.userStore.login(this.login_form);
      this.$router.push({ name: "Home" });
    },

    logout() {
      this.userStore.logout();
      this.form_type = "LOGIN";
    },
  },
  created() {},
};
</script>
<template>
  <div>
    <el-main
      style="
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 70vh;
      "
    >
      <div>
        <el-card style="width: 50vw">
          <template #header>
            <h2>Studio</h2>
          </template>
          <el-form
            :model="login_form"
            label-width="120px"
            v-if="form_type === 'LOGIN'"
          >
            <el-form-item label="所属">
              <el-radio-group v-model="login_form.app_id">
                <el-radio
                  v-for="app in apps"
                  :key="app.app_id"
                  :label="app.app_id"
                  size="large"
                  border
                >
                  {{ app.name }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="手机号码">
              <el-input v-model="login_form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="login_form.password"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="flex-grow"></div>
              <el-button
                type="primary"
                @click="onLogin"
                style="flex: 1"
                :disabled="!login_enable"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-main>
  </div>
</template>
